<template>
    <div class="page-wrap page-wrap-ql">
        <flexbox justify="space-between">
            <a-radio-group v-model:value="reportType" button-style="solid" @change="handleChange">
                <a-radio-button value="1">月汇报</a-radio-button>
                <a-radio-button value="2">季度汇报</a-radio-button>
                <a-radio-button value="3">半年度汇报</a-radio-button>
                <a-radio-button value="4">年度汇报</a-radio-button>
            </a-radio-group>
        </flexbox>
        <div class="margin-t-8">
            <CustomTable
                autoResize
                rowKey="id"
                size="small"
                :loading="loading"
                :columns="tableColumns"
                :data-source="list"
                :pagination="paginationConfig"
                @change="handleTableChange"
            >
                <template #createTime="{ text }">{{ $filters.dateFilter(text) }} </template>
                <template #systemCount="{ record }"> {{ record.systemCompleteCount }}/{{ record.systemCount }} </template>
                <template #action="{ record }">
                    <a @click="showDetail(record)">查看详情</a>
                    <a-divider type="vertical" v-auth="'energyManage.analysisReport.preview'" />
                    <a @click="handlePreview(record.id)" v-auth="'energyManage.analysisReport.preview'">查看报告</a>
                    <a-divider
                        type="vertical"
                        v-if="record.pushStatus === '1' && record.status !== '废弃' && record.systemCount !== 0"
                        v-auth="'energyManage.analysisReport.pushLead'"
                    />
                    <a
                        @click="handlePushLeader(record.id)"
                        v-if="record.pushStatus === '1' && record.status !== '废弃' && record.systemCount !== 0"
                        v-auth="'energyManage.analysisReport.pushLead'"
                        >推送领导</a
                    >
                    <a-divider type="vertical" v-if="record.pushStatus === '3'" />
                    <a-tag color="green" v-if="record.pushStatus === '3'">已审阅</a-tag>
                </template>
            </CustomTable>
        </div>
        <add-leader-modal ref="addLeaderModalRef" @success="getList" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import AddLeaderModal from '@/views/energyManage/analysisReport/components/AddLeaderModal.vue';
import { CustomTable } from '@/components';
import { useRouter } from 'vue-router';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'analysisReport',
    components: {
        AddLeaderModal,
        CustomTable
    },
    setup() {
        const router = useRouter();
        const addLeaderModalRef = ref<any>();
        const tableColumns = [
            {
                title: '报告名称',
                dataIndex: 'reportName',
                width: 300
            },
            {
                title: '状态',
                dataIndex: 'status',
                width: 100
            },
            {
                title: '系统总数',
                dataIndex: 'systemCount',
                slots: { customRender: 'systemCount' },
                width: 100
            },
            {
                title: '创建日期',
                dataIndex: 'createTime',
                slots: { customRender: 'createTime' },
                width: 160
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                width: 300,
                slots: { customRender: 'action' }
            }
        ];
        const state = reactive<any>({
            loading: false,
            reportType: '1',
            list: [],
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            }
        });
        const handleChange = (val) => {
            getList();
        };
        const showDetail = ({ id, reportName }) => {
            router.push({
                path: '/energyManage/analysisReport/list',
                query: {
                    id,
                    reportName
                }
            });
        };
        const handlePushLeader = (id) => {
            unref(addLeaderModalRef).open(id);
        };
        const handlePreview = (id) => {
            router.push({
                path: '/energyManage/analysisReport/beijixingBoard',
                query: {
                    id
                }
            });
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        const getList = async () => {
            state.loading = true;
            const { current, pageSize } = state.paginationConfig;
            const query = {
                pageSize: pageSize,
                pageNum: current,
                reportType: state.reportType
            };
            const { success, moule, totalCount } = await api.requireReportModel.getRequireReports(query);
            if (success) {
                state.list = [...moule];
                state.paginationConfig.total = totalCount;
            }
            state.loading = false;
        };
        getList();
        return {
            tableColumns,
            addLeaderModalRef,
            ...toRefs(state),
            handleChange,
            showDetail,
            handlePushLeader,
            handlePreview,
            getList,
            handleTableChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    padding: 12px 24px;
    background: #fff;
}
</style>